<template>
  <div>
    <quill-editor
      class="mycon"
      :value="value"
      @input="valueChange"
      ref="myQuillEditor"
      :options="editorOption"
    >
    </quill-editor>
    <input
      class="util"
      type="file"
      ref="fileInput"
      accept="image/gif,image/jpeg,image/jpg,image/png,image/bmg"
      @change="upimg($event)"
    />
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getQiniuToken } from "api/commonApi";
import config from "api/config";
import * as qiniu from "qiniu-js";
import { quillEditor, Quill } from "vue-quill-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from 'quill-image-resize-module'

Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
// import { ImageExtend, QuillWatch } from "quill-image-extend-module";
// Quill.register("modules/ImageExtend", ImageExtend);
const toolbarOptions = [
  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  ["bold", "italic", "underline", "strike", "blockquote"], // toggled buttons
  [{ align: [] }],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  ["link", "image"], // 自定义
  ["clean"] // remove formatting button
];
export default {
  components: {
    quillEditor
  },
  props: {
    value: {
    },
    disabled: {
      default: false
    }
  },
  watch: {
    disabled: {
      handler: function(value) {
        console.log('编辑器的状态', value)
        this.$nextTick(() => {
          if(value) {
            this.$refs.myQuillEditor.quill.enable(false);
          }else{
            this.$refs.myQuillEditor.quill.enable();
          }
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      content: "",
      imgUrl: config.imgUrl,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: () => {
                this.$refs.fileInput.click();
              }
            }
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          }
        },
        placeholder: "请输入 ..."
      }
    };
  },
  methods: {
    // onEditorBlur(quill) {
    //   console.log("editor blur!", quill);
    // },
    // onEditorFocus(quill) {
    //   console.log("editor focus!", quill);
    // },
    // onEditorReady(quill) {
    //   console.log("editor ready!", quill);
    // },
    // onEditorChange({ quill, html, text }) {
    //   console.log("editor change!", quill, html, text);
    //   this.content = html;
    // },
    valueChange(value){
      this.$emit('input', value)
    },
    upimg(event) {
      var files = event.target.files;
      files = Array.from(files);
      files.forEach(file => {
        if (file.size > 5 * 1024 * 1024) {
          alert("上传文件只能为5M内");
        } else {
          getQiniuToken().then(res => {
            let token = res.rData[0].token;
            this._upImg(file, file.name, token);
          });
        }
      });
      this.$nextTick(() => {
        event.target.value = "";
      });
    },
    insetImg(res) {
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, "image", res);
        // 调整光标到最后
        quill.setSelection(length + 1);
      }
    },
    _upImg(file, key, token) {
      // let putExtra ={
      //   fname: "",
      //   params: {},
      //   mimeType: null
      // }
      // let config = {
      //   useCdnDomain: true,
      //   region: null
      // };
      var observable = qiniu.upload(file, null, token, null, null);
      observable.subscribe({
        next: res => {
          console.log("进度", res);
        },
        error: err => {
          console.log("错误", err);
        },
        complete: res => {
          console.log("完成", res);
          this.insetImg(this.imgUrl + res.key);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mycon {
  height: 400px;
  padding-bottom: 7px;
}
.util {
  display: none;
}
</style>
